/*--------------------general styles--------------------*/
html, body{
	float:left;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
    font-family:'Merriweather', serif;
	color:#808080;
	font-size:100%;
	background:#111;
}
a{
    text-decoration:none;
	outline:none;
	color:#343434;
}
a:hover{
	color:#E73525;
}
::selection{
	background:#ddd;
}
::-moz-selection{
    background:#ddd;
}
img{
	float:left;
	max-width:100%;
}
#navbar{
	display:none;
}

/*--------------------various spans (can be applied to any tag
 * through the whole layout)--------------------*/
.bold{
	font-weight:700;	
}
.arrow{
	color:#aaa;	
}
.orange{
	color:#e13b29;	
}
.orange:hover{
	color:#6d6e71;
}
/*--------------------wrappers-------------------*/
#wrapper{
	float:left;
	width:100%;
	background:transparent;
}
#white-wrapper{
	float:left;
	width:80%;
	margin:0 10% 5% 10%;
	/*margin:0 auto;
	width:1240px;*/
	background:#f0f0f0;
}
#white-wrapper-inner{
	float:left;
	width:92%;
	margin:4%;
	/*width:1160px;
	background:#f0f0f0;
	padding:40px;*/
}
/*--------------------header-------------------*/
header{
	float:left;
	width:100%;
	clear:both;
	margin-bottom:4%;
}
/*--------------------header: logo-------------------*/
h1#logo{
    float:left;
	font-family:'Abel', sans-serif;
	text-transform:uppercase;
}
h1#logo a{
	color:#343434;
	text-shadow: 0 1px 1px #fff;
	font-size:2.8em;	
	line-height:1em;
}
/*--------------------header: menu/navigation-------------------*/
nav{
	float:right;
	margin:5px 0 0 0;
}
nav ul{
	list-style:none;
}
nav li{
	float:left;
	padding:0 0 0 20px;
}
nav li a{
	color:#808080;
	padding:10px 0 0 0;
}
nav li a:hover{
	color:#313131;
	background:url(http://yourdomain/images/link-top.png) top center;
	background-repeat:no-repeat;
	padding:10px 0 0 0;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/
}
nav li.selected a{
	color:#aaa;
}
nav li.selected a:hover{
	color:#313131;
}	
/*--------------------header: styles end here-------------------*/

/*--------------------footer-------------------*/
#footer-wrap{
	float:left;
	width:100%;
}
footer#footer{
	float:right;
	margin-bottom:-1px;
	margin-right:-1px;
	background:#111;
	padding:0.6em 1.2em;
}
footer#footer small{
	color:#ddd;
	font-size:0.7em;
	font-family:'Droid Sans', sans-serif;
	letter-spacing:0.1em;
}
/*--------------------footer: styles end here-------------------*/

/*--------------------main content block-------------------*/
/*--------------------inner wrapper wraps main block of content. it includes main content box and aside
(various widgets, search field and more) + bottom block-------------------*/
#inner{
	float:left;
	width:100%;
	clear:both;
	margin:0;
}
#main-content{
	float:left;
	width:70%;
}
/*--------------------aside-------------------*/
aside{
	float:right;
	width:26%;
	margin-left:4%;
}
/*--------------------aside: widget styles-------------------*/
aside .widget{
	float:left;
	width:100%;
}
aside .widget h2{
	color:#bebebe;
	margin-bottom:20px;
	font-family:'Droid Sans', sans-serif;
	text-transform:uppercase;
	font-size:1.1em;
}
aside .widget-content ul{
	list-style:none;
	float:left;
	width:100%;
	color:#aaa;
}
aside .widget-content li{
	float:left;
}
aside .widget-content a{
	color:#343434;
}
aside .widget-content a:hover{
	color:#bebebe;
}
/*--------------------aside: recent posts styles-------------------*/
#HTML2{
	float:left;
	width:100%;
    margin-bottom:40px;
}
.recentposts{ 
	float:left;
	width:100%;
}
.recentposts a{ 
	display: block; 
	font-size:1.1em;
	padding:0 0 0 0;
	line-height:1.5em;
}
.recentposts a:hover{
	color:#808080;
}
.recentposts ul{
	float: left;
	 width:100%;
}
.recentposts li{
	float:left;
	width:100%;
	margin: 0 0 20px 0;
	padding-bottom:10px;
	border-bottom:1px solid #ddd;
	list-style:none;
}
.recentposts li:last-child{
	margin:0;
}
/*--------------------aside: search styles-------------------*/
#search{
    float:left;
    width:100%;
    margin-bottom:40px;
}
#search form{
    float:left;
    width:100%;
    clear:both;	
    overflow:hidden;	
}
#search form input{
	padding:2%;	
	color:#fafafa;
	font-family:'Droid Sans', sans-serif;
}
#searchsite{
	float:left;
	background:#1f1f1f;
	border:1px solid #111;
	margin-right:2%;
    width:60%;
}
#searchsubmit{
	float:right;
    width:32%;
	background: #E73525;
	border:1px solid rgba(255,255,255,0.2);
	text-transform:uppercase;
	cursor:pointer;
}
#searchsubmit:hover{
	background:#e13b29;
    background: -moz-linear-gradient(19% 75% 90deg, #e13b29, #ef422f);
    background: -webkit-gradient(linear, left top, left bottom, from(#ef422f), to(#e13b29));
    background-image: -o-linear-gradient(top,rgb(225,59,41),rgb(239,66,47));
	border:1px solid rgba(255,255,255,0.4);	
}
/*--------------------aside: scroll links (scroll up/scroll down) styles-------------------*/
.scrolllinks{
	width:100%;
	float:left;
    font-family:'Droid Sans', sans-serif;
    text-transform:lowercase;
    font-size:0.9em;
    margin-bottom:40px;
}
#scrollup{
	width:100%;
	padding:0 0 10px 0;
	border-bottom:1px solid #ddd;
	float:left;
}
#scrolldown{
	width:100%;
	padding:10px 0 0 0;	
	float:left;
}
.circle{
	float:left;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#fff;
	border-radius:20px;
	background:#e13b29;
}
.circle:hover{
	color:#111;
}
/*--------------------aside: tags (widget #Label1)-------------------*/
#tags{
	float:left;
    width:100%;
    margin-bottom:30px;
}
#tags li{
	float:left;
	margin:0 10px 10px 0;
	background:#fafafa;
	padding:2% 4%;
	border:1px solid #fff;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.1); 
}
#tags a{
	line-height:normal;
}
/*--------------------aside: social icons and newsletter bar styles-------------------*/
#bar{
	width:100%;
	float:left;
	clear:both;
	padding-top:20px;
	border-top:1px solid #ddd;
	margin-bottom:40px;
}
#bar h3{
	font-family:'Droid Sans', sans-serif;
	font-size:0.9em;
	margin-bottom:20px;
	text-transform:uppercase;	
}
#bar p{
	font-family:'Droid Sans', sans-serif;
	font-size:0.8em;
	display:block;
    line-height:1.4em;
}
#social{
	float:left;
	margin-right:2%;
	width:38%;
}
ul.social-icons{
	float:left;
	list-style:none;
}
ul.social-icons li{
	float:left;
	margin-right:4px;
}
ul.social-icons li.end{
	margin-right:0;
}
ul.social-icons a{
	display:block;
	width:24px;
	height:24px;
}
a.twitter{
	background:url(http://yourdomain/images/twitter.png) no-repeat  0 0;
}
a.facebook{
	background:url(http://yourdomain/images/facebook.png) no-repeat  0 0;
}
a.youtube{
	background:url(http://yourdomain/images/youtube.png) no-repeat  0 0;
}
a.vimeo{
	background:url(http://yourdomain/images/vimeo.png) no-repeat  0 0;
}
#newsletter{
	float:right;
	width:60%;
}
/*--------------------aside: general styles end here-------------------*/

/*--------------------aside: text styles (widget #HTML1 / visible only on home page, hidden on rest of pages)-------------------*/
.text, #HTML1{
	float:left;
	width:100%;
}
.text{
	margin-bottom:40px;	
}
.text h1{
    font-size:1.8em;
    margin-bottom:20px;
	text-transform:capitalize;
}
.text p{
	line-height:1.5em;
	margin-bottom:20px;
}
.text a.readmore{
	padding:0 0 10px 0;
	border-bottom:1px solid #ddd;
	display:block;
	font-family:'Droid Sans', sans-serif;
}
.text a.readmore:hover{
	color:#e13b29;
}

/*--------------------home page: individual styles-------------------*/
#topblock{
	float:left;
	width:100%;
	margin:0 0 4% 0;
}
/*--------------------home page: top picture with overlayed annotations (widget #HTML5)-------------------*/
#showcase{
	float:left;
	width:100%;
	margin:0 0 56px 0;
}
#showcase figure{
    float:left;
    width:100%;	
	border:1px solid #fff;
	position:relative;
}
#showcase #infosquare{
    position:absolute;
    top:60px;
    left:40px;
    z-index:1;
    font-size:1.3em;
}
#ie-image{
	display:none;/*workaround IE, image only, annotations feature is hidden from IE*/
}
.info-title{
	background:rgba(255,255,255,0.9);
    padding:20px;
}
.info-info{
	background:rgba(231,53,37,0.8);
	padding:20px;
	margin-left:1px;
	color:#fff;
	text-shadow:none;
}
.glow{	
   -webkit-animation: glow 5s infinite;
   -moz-animation: glow 5s infinite;
   -o-animation: glow 5s infinite;
   -ms-animation: glow 5s infinite;
}
@-webkit-keyframes glow{
    0%{
    opacity: 1;
}
    30%{
    opacity: 0.6;
}
    60%{
    opacity: 0.8;
}
    80%{
    opacity: 0.9;
}
    100%{
    opacity:1;
}
}
@-moz-keyframes glow{
     0%{
    opacity: 1;
}
    30%{
    opacity: 0.6;
}
    60%{
    opacity: 0.8;
}
    80%{
    opacity: 0.9;
}
    100%{
    opacity:1;
}
}
@-ms-keyframes glow{
    0%{
    opacity: 1;
}
    30%{
    opacity: 0.6;
}
    60%{
    opacity: 0.8;
}
    80%{
    opacity: 0.9;
}
    100%{
    opacity:1;
}
}
/*--------------------home page: annotations-------------------*/
.ao-item{
    width: 100%;
    float:left;
    position: relative;
}
.ao-item img{
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2); 
}
.ao-preview {
    width: 100%;
    float: left;
    position: relative;
}
.ao-annotations{
    width: 100%;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,0.4);
    box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
    opacity: 0;
    z-index: 5;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.ao-annotations span{
    display: block;
    position: absolute;
    padding: 1em 1.5em;
    width: 33%;
    min-width: 140px;
    text-align: center;
    background: #f0f0f0;
    color: #111;
    font-size: 1em;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
    opacity: 0;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.ao-annotations span:nth-child(1) {
    top: 10%;
    left: 16%;
}
.ao-annotations span:nth-child(2) {
    top: 26%;
    left: -3%;
}
.ao-annotations span:nth-child(3) {
    top: 37%;
    right: 2%;
}
.ao-annotations span:nth-child(4) {
    top: 56%;
    right: -3%;
}
.ao-annotations span:nth-child(5) {
    bottom: 18%;
    left: -2%;
}
input.ao-toggle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 100;
    border: none;
    cursor: pointer;
}
input.ao-toggle:checked + img {
    box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
    opacity: 1;
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
input.ao-toggle:hover + img{
    opacity: 1;
}
input.ao-toggle:checked ~ .ao-annotations,
input.ao-toggle:checked ~ .ao-annotations span{
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
input.ao-toggle:checked ~ .ao-annotations span:nth-child(1) {
    -moz-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
input.ao-toggle:checked ~ .ao-annotations span:nth-child(2) {
    -moz-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
input.ao-toggle:checked ~ .ao-annotations span:nth-child(3) {
    transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
}
input.ao-toggle:checked ~ .ao-annotations span:nth-child(4) {
    -moz-transition-delay: 0.6s;
    -webkit-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    transition-delay: 0.6s;
}
input.ao-toggle:checked ~ .ao-annotations span:nth-child(5) {
    -moz-transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    transition-delay: 0.7s;
}
/*--------------------home page: welcome text styles (widget #HTML7)-------------------*/
#welcometext{
	float:left;
	width:100%;
	padding:0 0 20px 0;
	border-bottom:1px solid #ddd;
	text-align:center;
	color:#808080;
	text-shadow: 0 1px 1px #fff;
}
#welcometext h1{
	font-size:1.9em;
	margin-bottom:20px;
	line-height:0.9em;
}
#welcometext p{
	line-height:1.5em;	
	font-size:1.5em;
	padding:0 5%;
}
/*--------------------home page: styles end here-------------------*/

/*--------------------posts styles-------------------*/
.blog-posts{
	float:left;
	width:100%;
	margin:0;
	background:transparent;
}
.hentry{
	float:left;
	width:100%;
	padding:0;
	margin:0;
}
.post{
	float:left;
	width:92%;
	padding:4%;
	margin-bottom:40px;
	background:#f5f5f5;
	border:1px solid rgba(221,221,221,0.6);
}
h2.date-header{
	float:left;
	text-transform:uppercase;
	font-family:'Droid Sans', sans-serif; /*post date*/
	margin-bottom:20px;	
}
h3.post-title{
	float:left;
	width:100%;
	font-size:2em;	
	line-height:1.4em;
	color:#808080;
    text-shadow: 0 1px 1px #fff;
    text-transform:capitalize;
	margin-bottom:40px;	/*post title*/
}
h3.post-title a{
	color:#808080;
    text-shadow: 0 1px 1px #fff;/*post title anchor*/
}
h3.post-title a:hover{
	color: #ef422f;	
}
.post-body{
	float:left;
	width:100%;
	line-height:1.5em;
}
.post-footer{
	float:left;
	width:96%;
	margin:0;	
	background:#f0f0f0;
    padding:2%;
}
.post-footer-line{
	float:left;
	width:100%;
	margin:0;	
	background:#f0f0f0;/*number of comments, author, label etc*/
	clear:both;
}
.post-author, .post-timestamp{
	font-weight:300;
    font-size:0.8em;/*posted by, posted at*/
    float:left;
}
.post-author a, .post-timestamp a{
	 font-weight:400;
}
.post-author a{
	margin-right:5px;
}
a.comment-link{
    float:right;/*number of comments*/
	color: #ef422f;	
    background:url(http://yourdomain/images/comment.png);
    background-repeat:no-repeat;
    background-position:0 4px;
    height:24px;
    line-height:24px;
    padding:0 0 0 30px;
    font-size:0.8em;
    text-transform:lowercase;
}
a.comment-link:hover{
    color:#808080;
}
.post-labels{
    font-size:0.9em;
    margin-top:5px;	/*events tags*/
    float:left;
    width:100%;
}
.post-labels a{
	margin-left:4px;
	font-weight:700;
    color:#808080;
}	
.post-labels a:hover{	
	color: #ef422f;		
}
.jump-link{
	float:left;
	width:100%;
	margin-bottom:40px;
}
.horizontal-social-buttons{
	float:left;
	width:100%;
	margin:40px 0;
	padding:2% 0 0 0;
	border-top:1px solid rgba(221,221,221,0.6);
}
.post-template{
	float:left;
	width:100%;
}
.post-top{
	float:left;
	width:100%;
	margin-bottom:40px;	
}
.post-body figure{
    float:left;
    width:100%;	
	border:1px solid #fff;
}
.post-body figure.end{
	margin-bottom:0;
}
.post-body figure img{
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2); 
}
.video-holder{
	float:left;
	width:100%;
	background:#000;
}
.video-container{
	position: relative;
	padding-bottom: 70%;
	height: 0;
	overflow: hidden;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.post-template article figure{
	margin-bottom:40px;
}
.post-template article{
	float:left;
	width:100%;
}
.post-template article h1{
	font-size:1.2em;
	margin-bottom:20px;
}
.post-template p{
	margin-bottom:20px;
}
.post-template p.last{
	margin-bottom:0;
}

/*--------------------post styles end here-------------------*/

/*--------------------comments styles-------------------*/
#comments, .comments{
	float:left;
	width:92%;
	margin:0 0 40px 0;
	padding:4%;
	background:#f5f5f5;
	border:1px solid rgba(221,221,221,0.6);
}
.comments h4{
	color:#bebebe;
    letter-spacing:0.1em;/*number of comments*/
    margin-bottom:20px;
}
.comments-content{
	background:#eee;
	padding:20px;
}
.deleted-comment {
	color:#999;
	font-weight:300;
}

/*--------------------comment styles end here-------------------*/

/*--------------------previous/next styles-------------------*/
.blog-pager{
	float:left;
	width:100%;
}
#blog-pager-menu{
	float:right;
    margin:;
    padding:0;
}
#blog-pager-menu a{
    font-family:'Droid Sans', sans-serif;
    text-transform:uppercase;
    font-size:0.9em;
    color:#808080;
}
#blog-pager-menu a:hover{
	color: #ef422f;
}
.slashes{
	padding:0 5px;
}
#blog-pager-newer-link{

}
#blog-pager-older-link{

}
a.home-link{
	padding:5px 10px;
	text-align:center;	
	display:inline-block;
}
/*--------------------previous/next styles end here-------------------*/


/*--------------------static pages styles-------------------*/
/*--------------------calendar page styles-------------------*/
#calendar{
    float:left;
    width:100%;
    margin-top:60px;
}
/*--------------------questions page styles-------------------*/
/*--------------------accordion styles-------------------*/
.accordion{
	float:left;
	width:100%;
}
.accordion h2{
	font-size:1.2em;
	margin-bottom:20px;
	cursor:pointer;
	padding-left:50px;
	line-height:1.5em;
	background:url(http://yourdomain/images/question.png);
	background-repeat:no-repeat;
}
.accordion h2.end{
	margin-bottom:0;
}
.accordion p.end{
    margin:20px 0 0 0;
}
section{
	float:left;
	width:100%;
	margin-bottom:80px;
}
/*--------------------plain styles-------------------*/
.plaintext{
	float:left;
	width:100%;	
}
.plaintext h2{
	font-size:1.2em;
	margin-bottom:20px;
	padding-left:50px;
	line-height:1.5em;
	background:url(http://yourdomain/images/question.png);
	background-repeat:no-repeat;
}
.plaintext p.end{
    margin:0;
}
section.end{
	float:left;
	width:100%;
	margin-bottom:0;/*-----after choosing one out of two variants of FAQs styles you can remove [section] tag from both html and css-----*/
}
/*--------------------contact page styles-------------------*/
#map_canvas { 
	width:100%;
    height: 600px;
    float:left;
}
#map_canvas img{
	max-width:none;
}
#form{
	float:left;
	width:100%;
	margin-bottom:40px;
}
form{
	float:left;
	width:100%;
}
fieldset{
	float:left;
	width:100%;
}
.ss-form-entry{
	float:left;
	width:100%;
	clear:both;	
}
label{
	float:left;
	width:30%;
	margin:0 4% 2% 0;
	border-bottom:1px solid rgba(221,221,221,0.6);
	padding-bottom:2%;
	text-shadow:0 1px 1px #fff;
	font-family:'Droid Sans', sans-serif;
	font-size:0.9em;
}
input, textarea{
	float:right;
	width:61%;
	padding:2%;
	border:1px solid rgba(221,221,221,0.6);
	background:#f6f6f6;
	margin-bottom:2%;
}
input:hover, textarea:hover{
	background:#ececec;
	border:1px solid rgba(255,255,255,0.4);
	color:#555;
}
.ss-required-asterisk{
	margin-left:5px;
	color: #ef422f;
}
.buttonsubmit{
	float:left;
	margin-left:35%;
	background: #E73525;
	border:1px solid rgba(255,255,255,0.4);
	cursor:pointer;
	padding:8px 12px;
	color:#fafafa;
	font-family:'Droid Sans', sans-serif;
	text-transform:uppercase;
	display:inline-block;
}
.buttonsubmit:hover{
	background:#e13b29;
    background: -moz-linear-gradient(19% 75% 90deg, #e13b29, #ef422f);
    background: -webkit-gradient(linear, left top, left bottom, from(#ef422f), to(#e13b29));
    background-image: -o-linear-gradient(top,rgb(225,59,41),rgb(239,66,47));
	border:1px solid rgba(255,255,255,0.4);	
}
/*--------------------contact page styles-------------------*/
.about{
	float:left;
    width:100%;	/*you can reuse .about styles (and all related ones) further, on other pages.
    For example, if you will create a new page and will wish to apply same styles (article styles, headings styles etc)
    simply repeat markup of the About page*/
}
.about article{
	float:left;
	width:100%;
	margin-bottom:40px;
	clear:both;
}
.about article h1{
	font-size:1.4em;
	margin-bottom:20px;
}
.about article p{
	margin-bottom:20px;
}
.about article p.end{
	margin-bottom:0;
}
.about article .left{
	float:left;
	width:56%;
	margin:0 4% 0 0;
	padding:2%;
	background:#fff;
	border:1px solid rgba(221,221,221,0.6);
}
.about article .left p{
	padding:0 8%;
	font-size:0.9em;
}
.about article .left figure{
	margin-bottom:40px;
}
.about article .right{
	float:right;
	width:35%;
}
.about article .right p{
	font-size:0.95em;
}
.about article.end{
	margin-bottom:0;
}
/*--------------quotes-------------------*/
.about article blockquote{
	float:left;
	margin-bottom:20px;
	line-height:1.5em;
}
.about article  cite{
	float:right;
	margin-bottom:20px;
}
.about article cite.end{
	margin-bottom:0;
}

/*--------------------static styles end here-------------------*/